<template>
  <div class="base-set bg-light">
    <div class="container-title">基础设置</div>
    <Form ref="form" :label-width="80" class :model="form" :rules="rules">
      <Row>
        <i-col span="8">
          <FormItem label="促销名称" prop="name">
            <Input v-model="form.name" placeholder="请输入名称" :maxlength="15" />
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <i-col span="8">
          <FormItem label="活动时间" prop="date">
            <!-- <DatePicker :options="options" placeholder="开始时间" type="datetimerange" v-model="form.date"></DatePicker> -->
            <fomatDate
              v-model="form.date"
              :date-value="form.date"
            />
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <i-col span="8">
          <FormItem label="促销类型" prop="type">
            <Select v-model="form.type" placeholder="促销类型" @on-change="choiceSelect">
              <Option value="2">每满减</Option>
              <Option value="1">阶梯满减</Option>
            </Select>
          </FormItem>
        </i-col>
      </Row>
      <!-- <Row class="pr">
                <Col span="24">
                        <div class="col-li" v-if="form.type=='1'">
                            <FormItem label="活动规则" prop="main" >
                                :满   <Input v-model="form.main" style="width:60px" placeholder=""/>  件减
                            </FormItem>
                            <FormItem prop="second" class="col-left">
                                    <Input v-model="form.second" style="width:60px" placeholder=""/>  件
                            </FormItem>
                        </div>
                </Col>
      </Row>-->
      <Row>
        <i-col span="24">
          <div v-if="$store.state.fullsubSale.FullsubForm.type==2" class="ladder-select col-li">
            <FormItem label="活动规则" prop="main">:满
              <Input v-model="form.main" style="width:60px" placeholder :maxlength="5" />元
            </FormItem>
            <FormItem prop="second" class="col-left">减
              <Input v-model="form.second" style="width:60px" placeholder :maxlength="4" />元
            </FormItem>
            <FormItem prop="isParcel" class="col-left">
              <Checkbox v-model="form.isParcel" class="pl20">包邮</Checkbox>
            </FormItem>
          </div>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="24">
          <div v-if="$store.state.fullsubSale.FullsubForm.type==1" class="all-select col-li">
            <div class>
              <FormItem
                v-for="(item, index) in form.discount1"
                :key="index"
                :label="index<1 ?'促销规则': ''"
                :prop="'discount1.' + index + '.value'"
                :rules="{validator: validatem, trigger: 'blur'}"
              >
                <div class="item-li">:满
                  <Input v-model="item.value" style="width:60px" placeholder :maxlength="5" />元
                </div>
              </FormItem>
            </div>
            <div>
              <FormItem
                v-for="(item, index) in form.discount2"
                :key="index"
                class="col-left"
                :prop="'discount2.' + index + '.value'"
                :rules="{validator: validaten, trigger: 'blur'}"
              >
                <div class="item-li">减
                  <Input v-model="item.value" style="width:60px" placeholder :maxlength="5" />元
                </div>
              </FormItem>
            </div>
            <ul class="col-ul">
              <li v-for="(item, index) in form.discount1" :key="index">
                <Button
                  v-show="index<1"
                  type="primary"
                  icon="md-add"
                  size="small"
                  @click="onAddDiscount"
                />
                <Button
                  v-show="index>0"
                  type="primary"
                  icon="md-remove"
                  size="small"
                  @click="onReduceDiscount(index)"
                />
                <Checkbox v-model="item.isParcel" class="pl20">包邮</Checkbox>
                <!-- <span class="add">[<span>+</span>]</span>
                <span class="reduce">[<span>-</span>]</span>-->
              </li>
            </ul>
          </div>
        </i-col>
      </Row>
      <Row>
        <i-col span="8">
          <FormItem label="活动对象" prop="grade">
            <CheckboxGroup v-model="form.grade">
              <Checkbox v-for="item in storeTypeData" :key="item.id" :label="item.value">{{ item.text }}</Checkbox>
            </CheckboxGroup>
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <FormItem label="参与方式" prop="gender">
          <RadioGroup v-model="form.gender">
            <Radio label="1">全场商品参加</Radio>
            <Radio label="2">部分商品参加</Radio>
            <Radio label="3">部分商品不参加</Radio>
          </RadioGroup>
        </FormItem>
      </Row>
      <Row>
        <i-col span="8">
          <FormItem label="活动备注" prop="remarks">
            <Input v-model="form.remarks" type="textarea" placeholder="请输入活动备注" :maxlength="128" />
          </FormItem>
        </i-col>
      </Row>
    </Form>
  </div>
</template>
<script>
import { validatemBody, validatenBody } from './DefaultEditMethods'
import fomatDate from '@/components/ChoseDateFormat'
export default {
  components: {
    fomatDate
  },
  props: {
    form: Object,
    rules: Object
  },
  data () {
    return {
      gradeList: [],
      options: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      termList: [
        {
          id: 1,
          name: '限IP/UDID'
        },
        {
          id: 2,
          name: '限帐号'
        }
      ],
      isFreeShipping: false
    }
  },
  computed: {
    storeTypeData () {
      return this.$store.getters.storeTypeData
    }
  },
  mounted () {
    this.$store.dispatch('getStoreType')
  },
  methods: {
    validatem (rule, value, callback) {
      validatemBody(
        rule,
        value,
        callback,
        this.$store.state.fullsubSale.FullsubForm.discount1
      )
    },
    validaten (rule, value, callback) {
      validatenBody(
        rule,
        value,
        callback,
        this.$store.state.fullsubSale.FullsubForm.discount1,
        this.$store.state.fullsubSale.FullsubForm.discount2
      )
    },
    choiceSelect (val) {},
    onReduceDiscount (index) {
      this.$store.commit('onReduceDiscount', index)
    },
    onAddDiscount () {
      this.$store.commit('onAddDiscount')
    }
  }
}
</script>

